如果要控制元件出現或是消失，依照之前討論的章節，會使用到v-if、v-show的指令來完成，但當你的元件較多時，寫的code會看起來很多，這時可以使用:is來優化，下面用tab功能來當範例。

分頁功能 v-if

<div id="app">
  <button v-for="item in tab" :key="item" @click="click(item)">
    {{ item }}
  </button>
  <tab-one v-if="title === 'One'">{{ item }}</tab-one>
  <tab-two v-if="title === 'Two'"></tab-two>
</div>

const app = Vue.createApp({
  data() {
    return {
      title: 'One',
      tab: ['One', 'Two']
    }
  },
  methods: {
    click(e){
      this.title = e;
    }
  },
});
app.component('tab-one',{
  template: `<div>one-component</div>`
});
app.component('tab-two',{
  template: `<div>two-component</div>`
});

app.mount('#app');

1. 註冊兩個內層元件tab-one、tab-two。
2. 外層元件html模組，增加內層元件v-if判斷。
3. 透過@click="click(item)"改變外層元件的data，做到切換分頁功能。

目前子元件只有兩個用v-if來寫還看不差異，數量較多就可以改為:is方式來處理。

分頁功能 v-bind:is

<div id="app">
    <button v-for="item in tabs" :key="item" @click="titleTab = item">
        {{ item }}
    </button>
    <!-- titleTab的值有變化，元件跟著切換 -->
    <component :is="tabComponent">
</div>

const app = Vue.createApp({
  data() {
    return {
      titleTab: 'One',
      tabs: ['One','Two','Three','Four','Five','six'],
    };
  },
  computed: {
    tabComponent() {
      // 轉成小寫並回傳 ，符合相對應的component名稱，就會顯示。
      return `tab-${ this.titleTab.toLowerCase() }`
    }
  }
});
app.component("tab-one", {
  template: `<div class="tab">One component</div>`
});
app.component("tab-two", {
  template: `<div class="tab">Two component</div>`
});
app.component("tab-three", {
  template: `<div class="tab">three component</div>`
});
app.component("tab-four", {
  template: `<div class="four">four component</div>`
});
app.component("tab-five", {
  template: `<div class="tab">five component</div>`
});
app.component("tab-six", {
  template: `<div class="tab">six component</div>`
});
app.mount("#app");

新增了六個子元件，在外層元件模板使用v-if就要寫六次。

1. 這邊改寫為<component :is="tabComponent">。
2. 增加computed屬性，如果titleTab的值有變化，元件跟著切換，並改變computedName。

目前分頁功能可以正常運作，如果在每個子元件都放一個input輸入框，觀察裡面值的變化。

改寫上一個範例的Js

const app = Vue.createApp({
  data() {
    return {
      titleTab: 'One',
      tabs: ['One','Two','Three'],
    };
  },
  computed: {
    tabComponent() {
      // 轉成小寫並回傳 ，符合相對應的component名稱，就會顯示。
      return `tab-${ this.titleTab.toLowerCase() }`
    }
  }
});
app.component("tab-one", {
  template: `<div class="tab">One component</div>
  <input type="text" v-model="text">`,
  data() {
    return {
      text: "第一個子元件"
    }
  }
});
app.component("tab-two", {
  template: `<div class="tab">Tow component</div>
  <input type="text" v-model="text">`,
  data() {
    return {
      text: "第二個子元件"
    }
  }
});
app.component("tab-three", {
  template: `<div class="tab">Tow component</div>
  <input type="text" v-model="text">`,
  data() {
    return {
      text: "第三個子元件"
    }
  }
});
app.mount("#app");

修改輸入框的文字，再切換其他分頁，會發現修改後的值，不會被留存，為了解決這个問題Vue.js提供了<keep-alive>元素，來改善這個問題。

<keep-alive>

將要保留的元件，放在<keep-alive>元素即可：

<keep-alive>
    <component :is="tabComponent">
</keep-alive>

參考資料

重新認識 Vue.js
:is
keep-alive